<template>
	<view>
		<view class="top">
			<image class="tiaozhuan" src="../../../static/images/ljh/jt.png" @click="returnButton()"></image>
			<view class="title">
				就近加油
			</view>

			<view class="sslan">
				<uni-search-bar bgColor="#fff" class="uni-mt-10" radius="100" placeholder="郑州市高新区" clearButton="none"
					cancelButton="none">
				</uni-search-bar>
				<view class="qhan" @click="qhms()">
					地图模式
				</view>
			</view>
			<view class="qyList">
				<view class="qyItem">
					90#
				</view>
				<view class="qyItem">
					92#
				</view>
				<view class="qyItem">
					93#
				</view>
				<view class="qyItem">
					95#
				</view>
				<view class="qyItem">
					97#
				</view>
				<view class="qyItem">
					98#
				</view>
			</view>
		</view>
		<view class="jyzList">
			<view v-for="(item, index) in jyzListItems" :key="index" class="jyzItem">
				<uni-card :title="item.title" :extra="item.extra" :thumbnail="avatar" @click="onClick(item)"
					style="margin-top: 10rpx;">
					<view class="dd">
						<view class="ddimg1">
							{{ item.status1 }}
						</view>
						<view class="ddimg2">
							{{ item.status2 }}
						</view>
						<view class="ddimg3">
							{{ item.status3 }}
						</view>
					</view>
				</uni-card>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				jyzListItems: [{
						title: '中国石油加油站',
						extra: '556m',
						avatar: 'path/to/avatar1.jpg',
						status1: '待支付',
						status2: '待支付',
						status3: '待支付'
					},
					{
						title: '中国石油加油站',
						extra: '1.2km',
						avatar: 'path/to/avatar2.jpg',
						status1: '已支付',
						status2: '处理中',
						status3: '待发货'
					}
				]

			}
		},
		methods: {
			qhms() {
				uni.$u.route('/pages/ljh/refuelNearby2/refuelNearby2')
			},
			returnButton() {
				// uni.$u.route('/pages/index/index')
				uni.$u.route({
					url: '/pages/index/index',
					type: 'tab'
				})
			},
			onClick(item) {
				uni.$u.route('/pages/ljh/GasStationDetails/GasStationDetails')
			}
		}
	}
</script>

<style>
	.tiaozhuan {
		position: absolute;
		color: white;
		font-size: 50rpx;
		top: 50rpx;
		left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.sslan {
		display: flex;
	}

	.qhan {
		text-align: center;
		line-height: 100rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		font-size: 12rpx;
		color: white;
		background-color: blueviolet;
		box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	}

	.jyzList {
		/* background-color: yellow; */
		position: absolute;
		top: 360rpx;
		width: 100%;
	}

	.qyItem {
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 90rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border: 1rpx solid #ffffff;
		/* 白色边框 */
		border-radius: 10rpx;
		/* 圆弧矩形的圆角半径 */
		color: white;
		font-size: 26rpx;

	}

	.qyList {
		display: flex;
		width: 100%;

	}

	.uni-mt-10 {
		margin-top: 0rpx;
		margin-left: 10rpx;
		width: 75%;
	}

	.top {
		width: 100%;
		height: 450rpx;
		background-image: url(@/static/images/ljh/tc1.png);
	}

	.title {
		width: 100%;
		color: white;
		text-align: center;
		padding: 50rpx 0rpx;
		font-size: 35rpx;
	}
</style>